<template>
	<div class="project-card"></div>
	<el-card class="project-card" shadow="hover">
		<template #header>
			<div class="card-header">
				<span>项目代号：23001</span>
			</div>
		</template>
		<div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
		<template #footer>Footer content</template>
	</el-card>
</template>

<script setup></script>

<style scoped lang="scss">
	:deep(.el-card__header) {
		background-image: linear-gradient(rgb(194, 228, 255) 0%, rgb(230, 244, 255) 100%);
	}
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.project-card {
		width: 480px;
	}
	.project-card:hover {
		cursor: pointer;
	}
</style>
